<template>
	<view class="page">
		<view class="forms">
			<uni-forms ref="formData" :model="formData" :rules="rules" labelPosition="top" labelWidth="100px">
				<uni-forms-item label="真实姓名" name="name" required>
					<input v-model="formData.name" type="text" placeholder="请输入您的真实姓名">
				</uni-forms-item>
				<uni-forms-item label="证件类型" name="type" required>
					<select> <!--证件类型选择-->
					    <option>居民身份证 </option>
					    <option>其他证件   </option>
					</select>
				</uni-forms-item>
				<uni-forms-item label="证件号码" name="idNumber" required>
					<input v-model="formData.idNumber" type="text" name="id_card" placeholder="请输入您的证件号码">
				</uni-forms-item>
				<uni-forms-item label="离校原因" name="reason" required>
					<input v-model="formData.reason" type="text" name="reason" placeholder="请输入离校原因">
				</uni-forms-item>
				<uni-forms-item label="离校时间" name="time" required>
					<uni-datetime-picker type="datetime" return-type="string"
						v-model="formData.time" /> 
				</uni-forms-item>
				<uni-forms-item label="离校目的地" name="direction" required>
					<input v-model="formData.direction" type="text" placeholder="请输入您的目的地">
				</uni-forms-item>
				<uni-forms-item label="乘坐交通工具" name="vehicle" required>
					<input v-model="formData.vehicle" type="text" placeholder="请输入乘坐的交通工具(具体到车次航班等)">
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<input v-model="formData.remark" type="text" placeholder="请输入您的备注信息" >
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" @click="submit">提交</button>
	</view>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		data() {
			let userInfo = uni.getStorageSync("userInfo")
			return {
				type:[{ value: 0, text: "居民身份证" },
					{ value: 1, text: "其他证件" },
				],
				formData:{
					type:[2],
					name:userInfo.name,
					idNumber:userInfo.idCard,
					direction:'',//离校目的地
					reason:'',//离校原因
					remark:'',//备注信息
					time:'',//离校时间
					vehicle:'',//返校车次信息
					// state:'',//状态标识0:申请成功，1：申请失败，2：待处理，3：已失效
				},
				rules:{
					name:{
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idNumber:{
						rules: [{
							required: true,
							errorMessage: '该项不能为空'
						}]
					},
					direction:{
						rules: [{
							required: true,
							errorMessage: '该项不能为空'
						}]
					},
					reason:{
						rules: [{
							required: true,
							errorMessage: '该项不能为空'
						}]
					},
					time:{
						rules: [{
							required: true,
							errorMessage: '该项不能为空'
						}]
					},
					vehicle:{
						rules: [{
							required: true,
							errorMessage: '该项不能为空'
						}]
					}
				}
			}
		},
		methods: {
			submit(){
				//validate()进行表单校验
				//TODO离校申请表单提交失败
				this.$refs.formData.validate((err,formData)=>{
					if(!err){
						console.log(this.formData.time);
						request('/application/out/record',{
							'name':this.formData.name,
							'idCard':this.formData.idNumber,
							'direction':this.formData.direction,
							'reason':this.formData.reason,
							'remark':this.formData.remark,
							'time':this.formData.time,
							'vehicle':this.formData.vehicle,
						},"POST").then(resp=>{
							console.log('resp',resp)//TODO
							if(resp.code===200){
								uni.showToast({
									icon:"success",
									title: `提交成功`
								})
								uni.navigateBack({
									delta:1
								})
							}
							console.log('resp',resp)
						}).catch( err =>{
							console.log('err',err)
						})
					}
					console.log('error',err)
				})
			}
		}
	}
</script>

<style>
	.page{
		margin:10px 20px;
	}
	@font-face {
	  font-family: "iconfont"; /* Project id  */
	  src: url('iconfont.ttf?t=1661769972350') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-erweima:before {
	  content: "\f010a";
	}
	
	.icon-weigouxuanv2:before {
	  content: "\e690";
	}
	
	.icon-lianxirendangan:before {
	  content: "\e7f6";
	}
	
	.icon-fanhui:before {
	  content: "\f0343";
	}
	
	.icon-shouye:before {
	  content: "\e8b9";
	}
	
	.icon-shangchuan:before {
	  content: "\e62f";
	}
	
	.top{
	    /* display: flex; */
	    width: 100%;
	    height: 44px;
	    background-color: #70C0DB;
	}
	.top .content{
	    width: 100%;
	    /* height: 44px; */
	    padding-top: 12px;
	    /* border:1px solid red; */
	}
	.top .iconfont{
	    font-size:20px;
	    padding-left: 12px;
	    color: #FFF;
	}
	.top .center{
	    font-size:20px;
	    padding-left: 120px;
	    color: #FFF;
	    text-align: center;
	}
	/* 表单 */
	.form{
	    font-family: PingFang SC;
	    padding-top: 22px;
	    width: 100%;
	    height: 100%;
	    font-size: 16px;
	}
	input{
	    border-bottom: 1px solid #BBBBBB;
	    border-top: 0px;
	    border-left: 0px;
	    border-right: 0px;
	    width: 100%;
	    height: 49px;
	    font-size:18px;
	    margin-bottom: 22px;
	}
	.btn{
	    margin-bottom: 22px;
	    position: relative;
	    display: inline-block;
	    width:100%;
	    height: 160px;
	    overflow: hidden; 
	    text-align:center;
	    vertical-align: center;
	    border-radius: 3px;
	background-color: rgb(246, 246, 249);
	   
	}
	.btn input{
	    position:absolute;
	    left: 0;
	    top: 0;
	    opacity: 0;
	}
	.iconfont{
	    color:#1890FF;
	    font-size: 47px;
	}
	.btn .little{
	    margin-top: 10px;
	    font-size:12px;
	    color:#AEAEB2;
	}
	
	.btn2{
	    margin-bottom: 22px;
	    position: relative;
	    display: inline-block;
	    width:100%;
	    height: 160px;
	    overflow: hidden; 
	    text-align:center;
	    vertical-align: center;
	    border-radius: 3px;
	background-color: rgb(246, 246, 249);
	   
	}
	.btn2 input{
	    position:absolute;
	    left: 0;
	    top: 0;
	    opacity: 0;
	}
	.btn2 .little{
	    margin-top: 10px;
	    font-size:12px;
	    color:#AEAEB2;
	}
	
	.btn3{
	    margin-bottom: 22px;
	    position: relative;
	    display: inline-block;
	    width:100%;
	    height: 160px;
	    overflow: hidden; 
	    text-align:center;
	    vertical-align: center;
	    border-radius: 3px;
	background-color: rgb(246, 246, 249);
	   
	}
	.btn3 input{
	    position:absolute;
	    left: 0;
	    top: 0;
	    opacity: 0;
	}
	
	.btn3 .little{
	    margin-top: 10px;
	    font-size:12px;
	    color:#AEAEB2;
	}
	#submit{
	    color:#FFF;
	    background-color: #539EB7;
		text-align: center;
	}

</style>
